@import './variables.less';

.__dumi-default-layout-hero > a {
  button {
    background: rgba(255, 255, 255, 0.6);
  }
}

.__dumi-default-layout-hero > a + a {
  margin-left: 22px;

  button {
    border: solid 1px #999;
    color: #666;
  }
}

.desktop {
  * {
    &::-webkit-scrollbar-thumb {
      background-color: #ddd !important;
    }

    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    &::-webkit-scrollbar-track {
      border-radius: 6px;
      background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 6px;
      background-color: transparent;
      transition: background-color 0.2s;
    }

    .@{prefix}-mobile-demo-layout {
      *,
      & {
        &::-webkit-scrollbar-thumb {
          background-color: transparent !important;
        }

        &:hover {
          &::-webkit-scrollbar-thumb {
            background-color: #ddd !important;
          }
        }
      }
    }
  }
}

.@{prefix}-layout-hero {
  position: relative;

  > * {
    position: relative;
    z-index: 2;
  }

  button {
    margin-right: 0 !important;
  }

  .particles-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-bottom: solid 1px #f8f8f8;
  }
}

.@{prefix}-mobile-demo-layout {
  height: 100%;
  overflow: auto;
  background: #f5f5f5;
}

.@{prefix}-menu {
  padding-top: 0 !important;

  &-inner {
    padding-top: 50px;
    box-sizing: border-box;
  }

  .@{prefix}-menu-list > li > a.active::after {
    opacity: 0 !important;
  }
}

// .@{prefix}-previewer-source-tab {
//   display: none;
// }

@media only screen and (max-width: 1024px) {
  .@{prefix}-search > input:not(:focus) {
    background-position-x: 7px;
  }

  @width: calc(100vw - 64px);

  .@{prefix}-search-input:focus {
    width: @width;
  }

  .@{prefix}-search > ul {
    min-width: @width !important;
    max-width: @width !important;
    width: @width;
  }
}
